<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
    <script src="script/jquery-1.10.min.js"></script>
    <style>
        * {
            margin: 20px;
        }
    </style>
</head>

<body>
<div class="container">
    <div style="width: 100px;height: 100px;border: 2px solid #cccccc"></div>
    <div class="btn btn-success">开始</div>
</div>
<script>
    function exadd() {
        alert("当前对象的a属性  " + this.a) // todo this当前对象
    }

    function example_1() {
        // todo window 也是对象 可以添加属性方法

        var arr1 = [1, 2, 3];
        console.log(typeof arr1);
        arr1.a = 1; // 给数组对象 添加属性
        console.log(arr1.a);
//        arr1.af = function () { //添加方法
//            alert(1)
//        };
//        arr1["af"] = exadd; // 给 arr1添加方法
        Array.prototype["af"] = exadd; // todo 通过原型 给所有 Array对象添加方法,可以为 自定义 原型（class）加入方法
        arr1.af()
    }

    function example_2() {
        var ob1 = new Object()
        ob1.a = 2;
        console.log("this is example_2", ob1.a)
    }

    //    function createObj(n) {
    //        var tmpobj = new Object()
    //        tmpobj.i = n
    //        tmpobj.ii = n * n
    //        return tmpobj
    //
    //    }
    //
    //    function example_3() {
    //        var map = new Map()
    //        var arrobj = new Array()
    //        for (var i = 0; i < 10; i++) {
    //            map.set(i, i * i)
    //            arrobj.push(createObj(i))
    //        }
    //        console.log("this is example_3 map", map)
    //        console.log("this is example_3 map", arrobj)
    //    }

    function Obj1(n) {  // 类似 python class Obj1() todo 构造函数

//        var this = new Object() 隐式加入
        this.i = n;
        this.ii = n * n
// 默认返回 this
    }

    function example_4() {// todo 构造函数
        var map = new Map();
        var arrobj = new Array();
        for (var i = 0; i < 10; i++) {
            map.set(i, i * i);
//            var tmp = new Obj(i); // todo 类名是Obj ,tmp为实例名
            arrobj.push(new Obj1(i)); // todo  new 会使 函数内 加入一行  var this = new Object()
        }
        console.log("this is example_4 map", map);
        console.log("this is example_4 map", arrobj);
    }

    function example_5() {
        var json = new Object();
        json = {  // json tpl
            "a": null,
            "b": null,
            "c": {
                "a": null,
                "b": null
            },
            "map":null
        };
        var arr1 = new Array();

        arr1 = [1, 2, 3];
        json.a = 1;
        json.b = arr1;
        json.c.a = 2;
        json.c.b = 3;
        json.map = {"ma":1}
        console.log(typeof json)
        console.log(json);
//        ajaxSend(json)
        ajaxSend(JSON.stringify(json))
    }

    function ajaxSend(json) {
        $.post("http://127.0.0.1:8000/study/get_user/",  //  project dj1.11-python3.6
            json,
            function (data, status) {
                if (status == "success" && data.success) {
                    console.log("access success")
                } else {
                    alert("接口出错")
                }
            });
    }

        $(".btn").click(function () {
            example_1(); // 给任意 对象 加属性方法
            console.log("=================================");
            example_2(); // 原型加方法
//        console.log("=================================")
//        example_3()
            console.log("==========用构造函数加属性，用原型加方法============");//
            example_4()
            console.log("==========用构造函数加属性，用原型加方法============");//
            example_5()
        })
</script>
</body>

</html>